React 中的元件 class component vs functional component-day4

2022 iThome 鐵人賽

DAY 4

Modern Web

為期 N 天的 react 小冒險系列第 4 篇

14th鐵人賽 react

dc88

2022-09-18 18:22:25

716 瀏覽

分享至

關於建構基本環境在之前的鐵人賽寫過了，時至今日仍然沒有太多差異
可以參閱 react 大冒險-來建立 React 專案的環境吧-day 6

環境內的資料夾結構也不再贅述，對此有興趣的話可以參閱 react 大冒險-React 專案的資料夾結構-day 7

React 的特色

virtual DOM

當頁面上的元素越來越多，對元素頻繁地進行內容變更及增減而直接去操作 DOM 會很耗費資源，
因此會希望 只對必要的元素做更新及編輯
而 virtual DOM 的概念就是用 javascript 來產生類似 DOM 的東西(copy of the orginal DOM)，但其本質上則是 js object，對 virtual DOM 做變更的話，可以針對變化的部分去更新(update)而不會真正去進行 DOM 的操作，達成減少資源消耗的目的

jsx (JavaScript XML)

在 react 中，使用 jsx 這種特殊的寫法來建構 component 內要渲染的 html 標籤
可以在 react 中寫 html，讓我們更簡易的在 react 中增添 html 內容

幾點整理如下

一般瀏覽器無法識別 jsx 需經過編譯
外觀看起來為混合 js 與 html 的型態
其實就是用 js 的變數來存取 html markups

jsx 規則

一次只能回傳一個 parent
如果想要回傳多個元素又不想要多在外層包一個 div 的話，可以使用 React.Fragment 把要回傳的元素們包起來

<React.Fragment>
   ...
</React.Fragment>

可以簡寫如下

<>
    ...
</>

保留字 (reserved word)
class 為 className
for 為 htmlFor

component 元件

基本上跟函式的作用一樣，但回傳片段 html 值的函式
component 間彼此獨立及可重複被使用
需特別注意的是 第一位字母必須為大寫

class component vs functional component

在 react 中有兩種用來撰寫 component 的方式，分別是 class component 跟 functional component
class component 使用 ES6 的 class 方法來編寫，並使用 extend 來繼承 react內定義的方法，寫法像這樣

class ListItem extends React.Component {
    render(){
        return <li>列表內的文字</li>
    }
}

早期 (react 16.8 前) functional component 為 stateless component 只能用來接收其他 component 傳進來的 props，本身並不能修改 state ，但隨著 react hook 的出現，functional component 也可以變更 state 了~

functional component 則跟 js function 類似，寫法如下

function ListItem(){
    return (<li>列表內的文字</li>)
}

做個簡表來比較一下差異

	class component	functional component
特色	es6 class	function
寫法長度	較長	較短
return 寫法	render()內再 return 要回傳的內容	直接 return 內容
props	要先執行建構子(constructor) 再呼叫 super 來定義 props	直接從函式的 parameter 傳入
修改 state	用 setState 來修改	import react hook 中的 useState 方法
類型	instances of react	function